<template>
  <div id="app" class="app">
    <router-view />
    
    <!-- 全局加载遮罩 -->
    <el-loading
      v-if="uiStore.loading.global"
      :lock="true"
      text="加载中..."
      background="rgba(0, 0, 0, 0.7)"
    />
    
    <!-- 全局错误提示 -->
    <transition name="error-toast">
      <div v-if="errorMessage" class="error-toast">
        <el-alert
          :title="errorMessage"
          type="error"
          :closable="true"
          @close="clearError"
          show-icon
        />
      </div>
    </transition>
    
    <!-- 全局成功提示 -->
    <transition name="success-toast">
      <div v-if="successMessage" class="success-toast">
        <el-alert
          :title="successMessage"
          type="success"
          :closable="true"
          @close="clearSuccess"
          show-icon
        />
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { useUIStore } from '@/stores/ui'
import { storeToRefs } from 'pinia'

const uiStore = useUIStore()
const { errorMessage, successMessage } = storeToRefs(uiStore)

const clearError = () => {
  uiStore.clearError()
}

const clearSuccess = () => {
  uiStore.clearSuccess()
}

// 监听路由变化，清除消息
watch(() => $route.path, () => {
  clearError()
  clearSuccess()
})

// 应用启动时的初始化
onMounted(() => {
  // 设置主题
  const theme = localStorage.getItem('app-theme') || 'light'
  document.documentElement.setAttribute('data-theme', theme)
  uiStore.setTheme(theme as 'light' | 'dark')
  
  // 设置窗口大小监听
  const handleResize = () => {
    uiStore.updateWindowSize({
      width: window.innerWidth,
      height: window.innerHeight
    })
  }
  
  window.addEventListener('resize', handleResize)
  handleResize()
  
  // 清理函数
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
  })
})
</script>

<style lang="scss">
#app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-color);
  color: var(--text-color);
}

// 全局过渡动画
.error-toast,
.success-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  min-width: 300px;
  max-width: 500px;
}

.error-toast-enter-active,
.error-toast-leave-active,
.success-toast-enter-active,
.success-toast-leave-active {
  transition: all 0.3s ease;
}

.error-toast-enter-from,
.error-toast-leave-to,
.success-toast-enter-from,
.success-toast-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

// 滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--border-color-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
  
  &:hover {
    background: var(--border-color-dark);
  }
}

// 选择文本样式
::selection {
  background-color: var(--primary-color-light);
  color: #fff;
}

// 全局动画类
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.3s ease;
}

.slide-left-enter-from,
.slide-left-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

// 加载状态
.loading-skeleton {
  background: linear-gradient(90deg, 
    var(--bg-color-light) 25%, 
    var(--border-color-light) 50%, 
    var(--bg-color-light) 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
</style>